<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ToughRADIUS Login</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <!-- Bootstrap 3.3.2 -->
    <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <!-- Font Awesome Icons -->
    <link href="/static/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <!-- Theme style -->
    <link href="/static/css/AdminLTE.min.css" rel="stylesheet" type="text/css"/>
    <!-- iCheck -->
    <link href="/static/plugins/iCheck/square/blue.css" rel="stylesheet" type="text/css"/>
    <link href="/static/css/login3.css" rel="stylesheet" type="text/css"/>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="/static/js/html5shiv.js"></script>
    <script src="/static/js/respond.min.js"></script>
    <![endif]-->
    <script>
        function dokey(e) {
            var keynum;
            var keychar;
            keynum = window.event ? e.keyCode : e.which;
            keychar = String.fromCharCode(keynum);
            if (keynum == 13) {
                doLogin();
            }
        }
        function doLogin() {
            var username = $("#username").val();
            var password = $("#password").val();
            params = {username: username, password: password, _xsrf: ''};
            $.post("/login", params, function (data) {
                if (data.code > 0) {
                    alert(data.msg)
                    return false;
                }
                else {
                    window.location.href = "/";
                }
            }, "json");
        }
    </script>
</head>
<body class="login-page" onkeypress="return dokey(event)">
<div class="login-box">
    <div class="login-logo">
        <!--<img src="/static/img/toughradius-logo.png">-->
</div>
<!-- /.login-logo -->
    <div class="login-box-body">
        <p class="login-box-msg"><img src="/static/img/toughradius-logo2.png"></p>

        <form action="/login" method="post">
            <div class="form-group has-feedback">
                <input type="text" id="username" class="form-control" placeholder="username" autocomplete="off"/>
                <span class="glyphicon glyphicon-user form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <input type="password" id="password" class="form-control" placeholder="Password" autocomplete="off"/>
                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>
            <div class="row">
                <!-- /.col -->
                <div class="col-xs-4">
                    <button type="button" onclick="javascript:doLogin();" class="btn btn-primary btn-block btn-flat">登录</button>
                </div>
                <!-- /.col -->
            </div>
        </form>


    </div>
    <!-- /.login-box-body -->
</div>
<!-- /.login-box -->

<!-- jQuery 2.1.3 -->
<script src="/static/plugins/jQuery/jQuery-2.1.3.min.js"></script>
<!-- Bootstrap 3.3.2 JS -->
<script src="/static/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<!-- iCheck -->
<script src="/static/plugins/iCheck/icheck.min.js" type="text/javascript"></script>
<script>
    $(function () {
        $('input').iCheck({
            checkboxClass: 'icheckbox_square-blue',
            radioClass: 'iradio_square-blue',
            increaseArea: '20%' // optional
        });
    });
</script>
</body>
</html>